...hopefully when needed.
By default I assume a left hand side placement on ltr languages
and the opposite in rtl, for other placements left/right style
classes can be used.
.sidebar {
background-color: $base_color;
border-top: 1px solid $borders_color;
- &:dir(ltr) { border-right: 1px solid $borders_color; }
- &:dir(rtl) { border-left: 1px solid $borders_color; }
+
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
/**********
* Frames *
**********/
-frame border,
+frame > border,
.frame {
box-shadow: none;
margin: 0;
* Sidebar *
***********/
.sidebar {
- border: none;
+ border-style: none;
background-color: mix($bg_color, $base_color, 50%);
+ @at-root %sidebar_left,
+ &:dir(ltr),
+ &.left,
+ &.left:dir(rtl) {
+ border-right: 1px solid $borders_color;
+ border-left-style: none;
+ }
+
+ @at-root %sidebar_right
+ &:dir(rtl),
+ &.right {
+ border-left: 1px solid $borders_color;
+ border-right-style: none;
+ }
+
&:backdrop {
background-color: $backdrop_sidebar_bg_color;
+ border-color: $backdrop_borders_color;
}
:selected { // FIXME: what this is supposed to select
}
list { background-color: transparent; }
+
+ paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
}
stacksidebar {
+ &.sidebar {
+ &:dir(ltr) list,
+ &.left list,
+ &.left:dir(rtl) list { @extend %sidebar_left; }
+
+ &:dir(rtl) list,
+ &.right list { @extend %sidebar_right; }
+ }
+
row {
padding: 10px 4px;
assistant .sidebar {
background-color: #292929;
border-top: 1px solid #1c1f1f; }
- assistant .sidebar:dir(ltr) {
- border-right: 1px solid #1c1f1f; }
- assistant .sidebar:dir(rtl) {
- border-left: 1px solid #1c1f1f; }
assistant .sidebar:backdrop {
background-color: #2c2c2c;
border-color: #1f2222; }
/**********
* Frames *
**********/
-frame border,
+frame > border,
.frame {
box-shadow: none;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #1c1f1f; }
- frame border.flat,
+ frame > border.flat,
.frame.flat {
border-style: none; }
- frame border:backdrop,
+ frame > border:backdrop,
.frame:backdrop {
border-color: #1f2222; }
* Sidebar *
***********/
.sidebar {
- border: none;
+ border-style: none;
background-color: #313434; }
+ stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
+ border-right: 1px solid #1c1f1f;
+ border-left-style: none; }
+ stacksidebar.sidebar:dir(rtl) list
+ .sidebar:dir(rtl), stacksidebar.sidebar.right list
+ .sidebar:dir(rtl), .sidebar.right {
+ border-left: 1px solid #1c1f1f;
+ border-right-style: none; }
.sidebar:backdrop {
- background-color: #333636; }
+ background-color: #333636;
+ border-color: #1f2222; }
.sidebar list {
background-color: transparent; }
+ paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
+ border-style: none; }
stacksidebar row {
padding: 10px 4px; }
assistant .sidebar {
background-color: #ffffff;
border-top: 1px solid #9d9d99; }
- assistant .sidebar:dir(ltr) {
- border-right: 1px solid #9d9d99; }
- assistant .sidebar:dir(rtl) {
- border-left: 1px solid #9d9d99; }
assistant .sidebar:backdrop {
background-color: white;
border-color: #a5a5a1; }
/**********
* Frames *
**********/
-frame border,
+frame > border,
.frame {
box-shadow: none;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #9d9d99; }
- frame border.flat,
+ frame > border.flat,
.frame.flat {
border-style: none; }
- frame border:backdrop,
+ frame > border:backdrop,
.frame:backdrop {
border-color: #a5a5a1; }
* Sidebar *
***********/
.sidebar {
- border: none;
+ border-style: none;
background-color: #f4f4f3; }
+ stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
+ border-right: 1px solid #9d9d99;
+ border-left-style: none; }
+ stacksidebar.sidebar:dir(rtl) list
+ .sidebar:dir(rtl), stacksidebar.sidebar.right list
+ .sidebar:dir(rtl), .sidebar.right {
+ border-left: 1px solid #9d9d99;
+ border-right-style: none; }
.sidebar:backdrop {
- background-color: #f4f4f3; }
+ background-color: #f4f4f3;
+ border-color: #a5a5a1; }
.sidebar list {
background-color: transparent; }
+ paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
+ border-style: none; }
stacksidebar row {
padding: 10px 4px; }